<template>


    <dv-border-box8 class="right-top" :animate="true">
        <div class="ring">
            <div style="flex:1;width: 50%;">
                <div class="title">标题</div>
                <dv-active-ring-chart :config="config" style="width:100%;height:80%" />
            </div>
            <div style="flex:1;width: 50%;">
                <div class="title">标题</div>
                <dv-active-ring-chart :config="config" style="width:100%;height:80%" />
            </div>
            
        </div>


        <!-- <dv-active-ring-chart :config="config" style="width:50%;height:100px" />
        <dv-active-ring-chart :config="config" style="width:50%;height:100px" />
        <dv-active-ring-chart :config="config" style="width:50%;height:100px" /> -->
    </dv-border-box8>


</template>
<script setup>
const config = ref({
    data: [
        {
            name: '周口',
            value: 55
        },
        {
            name: '南阳',
            value: 120
        },
        {
            name: '西峡',
            value: 78
        },
        {
            name: '驻马店',
            value: 66
        },
        {
            name: '新乡',
            value: 80
        }
    ]
})


</script>

<style scoped>
.right-top {
    width: 100%;
    height: 330px;
}

.ring {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
}
.title{
    padding-top: 20px;
    margin: 0 20px; 
}
</style>